<!--
 * @Author: hangzitong 
 * @Date: 2023-06-10 17:30:54
 * @LastEditors: hangzitong 
 * @LastEditTime: 2023-06-10 17:30:56
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        main{width:300px;position:fixed;right:0;bottom:0;top:0;background-color:#ccc;}
        .box{position:relative;height:100%}
        button{position:absolute;left:0;top:0;bottom:0;width:20px;background-color:pink}
    </style>
</head>
<body>
    
    <main>
        <div class="box">
            <button></button>
        </div>
    </main>

    <script>
        (function(){
            const fixedWidth = document.querySelector('main').offsetWidth
            function documentMove(e){
                const w = document.documentElement.offsetWidth-e.x
                if(w>fixedWidth && w<document.documentElement.offsetWidth - fixedWidth){
                    document.querySelector('main').style.width=w+'px'
                }
            }
            document.querySelector('button').addEventListener('mousedown',()=>{
                document.addEventListener('mousemove',documentMove)
            })

            document.addEventListener('mouseup',()=>{
                document.removeEventListener('mousemove',documentMove)
            })
        })()


    </script>
</body>
</html>
